<template>
  <view class="container">
    <view class="stats-card">
      <!-- 第一行：邀请统计 -->
      <view class="invites-section">
        <view class="invite-item">
          <text class="invite-title">直接邀请</text>
          <view class="progress-bar-group">
            <view class="progress-bar">
              <text class="progress-label">人数: {{ invites.direct.count }}/{{ invites.direct.totalCount }}</text>
              <progress :percent="(invites.direct.count / invites.direct.totalCount) * 100" stroke-width="8" activeColor="#1890ff"></progress>
            </view>
            <view class="progress-bar">
              <text class="progress-label">返利: {{ invites.direct.amount }}/{{ invites.direct.totalAmount }}元</text>
              <progress :percent="(invites.direct.amount / invites.direct.totalAmount) * 100" stroke-width="8" activeColor="#1890ff"></progress>
            </view>
          </view>
        </view>
        <view class="invite-item">
          <text class="invite-title">间接邀请</text>
          <view class="progress-bar-group">
            <view class="progress-bar">
              <text class="progress-label">人数: {{ invites.indirect.count }}/{{ invites.indirect.totalCount }}</text>
              <progress :percent="(invites.indirect.count / invites.indirect.totalCount) * 100" stroke-width="8" activeColor="#13ce66"></progress>
            </view>
            <view class="progress-bar">
              <text class="progress-label">返利: {{ invites.indirect.amount }}/{{ invites.indirect.totalAmount }}元</text>
              <progress :percent="(invites.indirect.amount / invites.indirect.totalAmount) * 100" stroke-width="8" activeColor="#13ce66"></progress>
            </view>
          </view>
        </view>
      </view>

      <!-- 第二行：昨日统计 -->
      <view class="daily-stats-section">
        <view class="stat-item">
          <text class="stat-value">{{ dailyStats.chargeCount }}</text>
          <text class="stat-label">昨日充电次数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ dailyStats.chargeAmount }}</text>
          <text class="stat-label">昨日充电电量</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ dailyStats.fee }}</text>
          <text class="stat-label">分成服务费</text>
        </view>
      </view>

      <!-- 第三行：累计统计 -->
      <view class="total-stats-section">
        <view class="stat-item">
          <text class="stat-value">{{ totalStats.chargeCount }}</text>
          <text class="stat-label">累计充电次数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ totalStats.chargeAmount }}</text>
          <text class="stat-label">累计充电电量</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ totalStats.fee }}</text>
          <text class="stat-label">分成服务费</text>
        </view>
      </view>
    </view>

    <view class="list-header">
      <view class="time-range-tags">
        <text v-for="item in timeRanges"
              :key="item.key"
              :class="['tag', { active: activeTimeRange === item.key }]"
              @click="onTimeRangeChange(item.key)">{{ item.label }}</text>
      </view>
      <view class="filter-btn" @click="openFilterPopup">
        <text>筛选</text>
        <!-- 可以加入一个筛选图标 -->
      </view>
    </view>

    <view class="earnings-list">
      <view v-for="item in earnings" :key="item.id" class="earning-item-card">
        <view class="type-badge-circle" :class="item.type === '0' ? 'direct-bg' : 'indirect-bg'">
          <text>{{ item.typeStrShort }}</text>
        </view>
        <view class="details-container">
          <view class="details-row">
            <text v-if="item.plate" class="plate-number">车牌: {{ item.plate }}</text>
            <text v-else></text> <!-- 用于占位，确保右对齐 -->
            <text class="fee-amount">+{{ item.fee }}元</text>
          </view>
          <view class="details-row">
            <text class="charge-info">时长: {{ item.duration }}</text>
            <text class="charge-info">电量: {{ item.energy }}度</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选弹窗 -->
    <uni-popup ref="filterPopup" type="bottom">
      <view class="filter-popup-content">
        <view class="filter-section">
          <text class="filter-title">类型</text>
          <radio-group @change="onFilterTypeChange">
            <label v-for="type in filterOptions.types" :key="type.value">
              <radio :value="type.value" :checked="type.value === filterOptions.selectedType" />{{type.label}}
            </label>
          </radio-group>
        </view>
        <view class="filter-section">
          <text class="filter-title">日期范围</text>
          <uni-datetime-picker v-model="filterOptions.dateRange" type="daterange" />
        </view>
        <view class="popup-actions">
          <button class="reset-btn" @click="resetFilters">重置</button>
          <button class="confirm-btn" @click="applyFilters">搜索</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      invites: {
        direct: { count: 1, totalCount: 20, amount: 200, totalAmount: 4000 },
        indirect: { count: 1, totalCount: 60, amount: 100, totalAmount: 6000 },
      },
      dailyStats: {
        chargeCount: 5,
        chargeAmount: '1.5 度',
        fee: '5元',
      },
      totalStats: {
        chargeCount: 100,
        chargeAmount: '200 度',
        fee: '1000元',
      },
      earnings: [
        { id: 1, type: '0', typeStr: '直接分成', typeStrShort: '直', plate: '皖A88888', fee: 10, duration: '1.2h', energy: 15.5 },
        { id: 2, type: '1', typeStr: '间接分成', typeStrShort: '间', fee: 5, duration: '0.8h', energy: 8.2 },
      ],
      timeRanges: [
        { key: 'today', label: '今日' },
        { key: 'yesterday', label: '昨日' },
        { key: 'week', label: '本周' },
        { key: 'month', label: '本月' },
      ],
      activeTimeRange: 'today',
      filterOptions: {
        types: [
            { value: 'all', label: '全部' },
            { value: 'direct', label: '直接' },
            { value: 'indirect', label: '间接' },
        ],
        selectedType: 'all',
        dateRange: [],
      },
    };
  },
  methods: {
    onTimeRangeChange(range) {
      this.activeTimeRange = range;
      // TODO: 根据时间范围重新获取数据
    },
    openFilterPopup() {
      this.$refs.filterPopup.open();
    },
    closeFilterPopup() {
      this.$refs.filterPopup.close();
    },
    onFilterTypeChange(e) {
        this.filterOptions.selectedType = e.detail.value;
    },
    applyFilters() {
      console.log('Applying filters:', this.filterOptions);
      // TODO: 应用筛选并重新获取数据
      this.closeFilterPopup();
    },
    resetFilters() {
      this.filterOptions.selectedType = 'all';
      this.filterOptions.dateRange = [];
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
}
.stats-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.invites-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.invite-item {
  display: flex;
  flex-direction: column;
}

.invite-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

.progress-bar-group .progress-bar:not(:last-child) {
  margin-bottom: 15px;
}

.progress-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.daily-stats-section,
.total-stats-section {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.total-stats-section {
  margin-top: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.time-range-tags .tag {
  padding: 6px 12px;
  background-color: #f0f0f0;
  color: #666;
  border-radius: 15px;
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
}

.time-range-tags .tag.active {
  background-color: #1890ff;
  color: #fff;
}

.filter-btn {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}

.earnings-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.earning-item-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  gap: 15px;
}

.type-badge-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  flex-shrink: 0;
}

.direct-bg {
  background-color: #1890ff;
}

.indirect-bg {
  background-color: #13ce66;
}

.details-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden; /* Prevents text overflow issues */
}

.details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plate-number {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.fee-amount {
  font-size: 16px;
  font-weight: bold;
  color: #ff4d4f;
}

.charge-info {
  font-size: 12px;
  color: #888;
}

.filter-popup-content {
  background-color: #fff;
  padding: 20px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.popup-actions {
  display: flex;
  gap: 10px;
}

.popup-actions button {
  flex: 1;
  border-radius: 20px;
}

.reset-btn {
  background-color: #f0f0f0;
  color: #333;
}

.confirm-btn {
  background-color: #1890ff;
  color: #fff;
}
</style>